<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('姓名')" prop="contactsName">
            <el-input v-model="form.contactsName" maxlength="15" show-word-limit :placeholder="$t('姓名')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('电话')" prop="phone">
            <el-input v-model="form.phone" oninput="value=value.replace(/[^-\d.]/g,'')" maxlength="25" show-word-limit :placeholder="$t('电话')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('所属公司')" prop="company">
            <el-input v-model="form.company" maxlength="15" show-word-limit :placeholder="$t('所属公司')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('职位')" prop="position">
            <el-input v-model="form.position" maxlength="15" show-word-limit :placeholder="$t('职位')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('邮箱')" prop="email">
            <el-input v-model="form.email" maxlength="100" show-word-limit :placeholder="$t('邮箱')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('微信')" prop="weChat">
            <el-input v-model="form.weChat" maxlength="30" show-word-limit :placeholder="$t('微信')" />
          </el-form-item>
        </el-col>
        <el-col v-if="!getBusinessId" :span="12">
          <el-form-item :label="$t('业务类型')" prop="businessType">
            <dictSelect
              v-model="form.businessType"
              :clearable="true"
              dictionary="main_body_type_all"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="!getBusinessId" :span="12">
          <el-form-item :label="$t('业务名称')" prop="businessId">
            <MainBodySelect
              v-model="form.businessId"
              :parameters="form.businessType"
              :placeholder="$t('请先选择业务类型')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item :label="$t('备注')" prop="remark">
            <el-input v-model="form.remark" type="textarea" maxlength="2000" show-word-limit :placeholder="$t('备注')" />
          </el-form-item>
        </el-col>
      </el-row>
      <!--过往经历列表-->
      <div style="margin-top:15px;">
        <div class="area-header">
          <span class="area-header-title">{{ $t('过往经历列表') }}</span>
        </div>
        <el-table
          :data="form.contactPastExperienceList"
          border
          class="nowrapTable formTable tree_el_Table"
        >
          <el-table-column :label="$t('任职公司')" align="center" prop="workCompany">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('任职公司') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'contactPastExperienceList.' + scope.$index + '.workCompany'" :rules="contactPastExperienceListRules.workCompany">
                <el-input v-model="scope.row.workCompany" :placeholder="$t('任职公司')" show-word-limit maxlenth="50" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('职位')" align="center" prop="position">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('职位') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'contactPastExperienceList.' + scope.$index + '.position'" :rules="contactPastExperienceListRules.position">
                <el-input v-model="scope.row.position" :placeholder="$t('职位')" show-word-limit maxlenth="50" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('备注')" align="center" prop="remark">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark" :placeholder="$t('备注')" show-word-limit maxlenth="200" />
            </template>
          </el-table-column>
          <el-table-column :label="$t('操作')" align="center" width="60px">
            <template slot-scope="scope">
              <el-button v-hasPermi="['contact:person:remove']" type="text" icon="el-icon-delete" @click="delHandleTerms(scope.$index, scope.row)" />
            </template>
          </el-table-column>
        </el-table>
        <div class="tol">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="addcontactPastExperience">{{ $t("添加") }}</el-button>
        </div>
      </div>
      <FileTable :list.sync="form.fileList" data-type="deal_contacts" :business-id="getBusinessId" />
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存，保存并启动流程，取消 三个按钮-->
      <SaveBtn has-permi="contact:person" />
    </div>
  </div>
</template>

<script>
    import { saveDealContacts, getDealContacts, delContactExperience } from '@/api/sass/yueyin/contact/YueYinContactsPerson'
    import MainBodySelect from '@/components/MainBodySelect/index'
    export default {
      components: {
        MainBodySelect
      },
      props: {
        busType: {
          type: String,
          default: undefined
        }
      },
        data() {
            const checkPhoneAndEmail = (rule, value, callback) => {
              if (value !== undefined && value !== '' && value !== null) {
                // 校验电话
                if (rule.field === 'phone') {
                  var regPhone = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/
                  if (!regPhone.test(value)) {
                    callback(new Error(this.$t('号码有误格式不正确：0000-0000000')))
                  }
                }
                // 校验邮箱
                if (rule.field === 'email') {
                  var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                  if (!regEmail.test(value)) {
                    callback(new Error(this.$t('无效邮箱')))
                  }
                }
                callback()
              } else {
                callback()
              }
            }
            return {
                // 表单参数
                form: {
                  fileList: [],
                  contactPastExperienceList: []
                },
                // 业务Id
                getBusinessId: this.$route.query.id,
                // 遮罩层
                loading: false,
                // 表单校验
              rules: {
                contactsName: [{ required: true, message: this.$t('必填信息'), trigger: 'blur' }],
                email: [{ required: false, validator: checkPhoneAndEmail,	trigger: 'blur' }],
                phone: [{ required: false, validator: checkPhoneAndEmail,	trigger: 'blur' }]
              },
              contactPastExperienceListRules: {
                workCompany: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
                position: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }]
              }
            }
        },
        mounted() {
          if (this.getBusinessId === undefined || this.getBusinessId === '' || this.getBusinessId === null) {
            this.getBusinessId = this.$route.query.lpId
          }
        },
        created() {
        },
        methods: {
            // 初始化数据
            init(data) {
                this.loading = true
                if (data != null && data.id !== undefined) {
                    getDealContacts(data.id).then(response => {
                        this.form = response.data
                        this.loading = false
                    })
                } else {
                    this.reset()
                    this.loading = false
                }
            },
            // 表单重置
            reset() {
                this.form = {
                id: undefined,
                businessId: this.getBusinessId ? this.getBusinessId : undefined,
                businessType: this.busType,
                contactsName: undefined,
                phone: undefined,
                company: undefined,
                position: undefined,
                email: undefined,
                weChat: undefined,
                fileList: [],
                remark: undefined,
                createBy: undefined,
                createTime: undefined,
                updateBy: undefined,
                updateTime: undefined,
                contactPastExperienceList: undefined,
                delFlag: undefined
                }
                this.resetForm('form')
            },

          // 添加过往经历信息
          addcontactPastExperience() {
            const row = {
              id: undefined,
              personId: undefined,
              workCompany: '',
              position: '',
              remark: ''
            }
            if (!(this.form.contactPastExperienceList instanceof Array)) {
              this.$set(this.form, 'contactPastExperienceList', [])
            }
            this.$nextTick(() => {
              this.form.contactPastExperienceList.push(row)
            })
          },
          // 删除过往经历中选中的数据
          delHandleTerms(index, row) {
            // eslint-disable-next-line no-undef
            const id = row.id
            if (id !== undefined && id !== '' && id != null) {
              this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
              })
                .then(function() {
                  return delContactExperience(id)
                }).then(() => {
                this.form.contactPastExperienceList.splice(index, 1)
                return this.msgSuccess(this.$t('删除成功'))
              })
                .catch(function() {})
            } else {
              this.form.contactPastExperienceList.splice(index, 1)
            }
          },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
            },
            // 关闭form页面
            closeForm() {
                // 关闭form页面遮罩层
                this.loading = false
                // 关闭form页面
                this.$parent.$parent.formOpen = false
                // 刷新list页面
                this.$parent.$parent.getList()
            },
            /** 提交按钮 */
            submitForm: function() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.loading = true
                        saveDealContacts(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess(this.$t('保存成功'))
                                this.closeForm()
                            } else {
                                this.msgError(response.msg)
                                this.loading = false
                            }
                        }).catch(() => {
                          this.loading = false
                        })
                    } else {
                      this.locationError(document)
                    }
                })
           }

        }

    }
</script>
